<template>
  <div class="windbidding-box-content">
      <div class="banner">
            <!-- <img src="./../../../static/img/chain/bg.jpg"> -->
      </div>
      <div class="invite-1200">
           <a-form layout="inline" :form="form">
              <a-form-item label='出发地' :span='10'>
                <a-input placeholder="请选择出发地" :span='14' style='width:190px;' v-model="fromCity" readOnly @click="magSvgShowMap('departureCar')">
               </a-input>
             </a-form-item>
              <a-form-item label='到达地'>
                <a-input  placeholder="请选择到达地" style='width:190px;' v-model="toCity" readOnly @click="magSvgShowMap('destinationCar')">
               </a-input>
              </a-form-item>
              <a-form-item label='运输类型'>
                <a-select @change="huowuChange" placeholder="运输类型" style="width: 140px;height:40px;" v-model="transType">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button class='invite-sosuo ant-btn-primary' type="primary" @click="logisticsTenderees()">
                  搜索
               </a-button>
             </a-form-item>
             <a-form-item>
                <a-button class='invite-reset' @click="reset()">
                  重置
               </a-button>
             </a-form-item>
           </a-form>
           <!-- 数据展示 -->
           <div class="tender-title">
                <span></span>
                <h2>中标信息</h2>
           </div>
           <div class="tender-line"></div>
           <div class="tender-list">
               <div class="tender-list-title">
                   <ul>
                       <li>中标信息</li>
                       <li>发布者</li>
                       <li>开始时间</li>
                       <li>结束时间</li>
                       <li>查看</li>
                   </ul>
               </div>
               <!-- 数据列表 -->
              <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
                    <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                    <div class="invite-box-conent">
                        <h4>{{item.tendTitle}}
                          <i v-if="item.tendStatus  === 0">招标中</i>
                          <i v-if="item.tendStatus  === 1">中标</i>
                        </h4>
                        <p class="inv-title wy-text-nowrap" style="width:300px">中标金额:{{item.winningMoney}}</p>
                    </div>
                    <div class="invite-box-conent">
                         <h4> {{item.company}}</h4>
                        <div class="useStar" v-if="item.starLevel">
                            <span>用户星级</span>
                            <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                            <div class="attestaion">{{item.tendStatusName}}</div>
                        </div>
                    </div>
                    <div class="v-doIt invite-box-conent">
                       <p>{{item.startTime&&item.startTime.split(' ')[0]}}</p>
                    </div>
                    <div class="v-doIt invite-box-conent">
                       <p>{{item.endTime&&item.endTime.split(' ')[0]}}</p>
                    </div>
                    <div class="v-doIt invite-box-conent">
                      <nuxt-link :to="`/invite/windbidding/${item.tendId}`">
                          <a-button class="ant-btn-primary" type="primary">查看详情</a-button>
                      </nuxt-link>
                    </div>
                   </a-list-item>
              </a-list>
           </div>
      </div>
      <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
  </div>
</template>

<script>

export default {
   components: {
    },
  data () {
    return {
      // 表格分页
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        current: 1,
        pageSize: 7,
        // showSizeChanger: true,
        total: 0,
        showTotal: (total, range) => `共 ${total} 条记录`,
        onChange: (page) => {
          this.pagination.current = page
          this.logisticsTenderees()
        }
      },
      // 起运地地址
      departureCar: '',
      destinationCar: '',
      departureSupply: '',
      destinationSupply: '',
      departureStorage: '',
      destinationStorage: '',
      highwayList: [],
       // 数据列表
      listData: [ ],
      transType: '',
      toCity:'',
      fromCity: '',
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
   created: function() {
      this.logisticsTenderees();
      this.infoCommonDict(31)
   },
  methods: {
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 31: this.highwayList = res.data.rows; break;
            }
          } 
      },
      // 运输类型
      huowuChange (value) {
        this.transType = value;
        // this.infoGoodsGetCargoByType();
      },
      async logisticsTenderees () {
        const res = await this.$store.dispatch('info/logisticsTenderees',{
          pageSize: this.pagination.pageSize,
          pageIndex: this.pagination.current,
          // fromCity:this.fromCity,
          // toCity:this.toCity,
          beginPlace:this.fromCity,
          endPlace:this.toCity,
          transType:this.transType,
          tendStatus: 1
        })
        if (res.status) {
          this.listData = res.data&&res.data.rows || [];
          this.pagination.total = res.data.total;//数据总数
        } 
      },
      //重置
      reset(){
         this.transType = '';
         this.fromCity = '';
         this.toCity = '';
         this.logisticsTenderees();
      },

      // 获取中标分类列表查询
        // async findBidsList () {
        //   const res = await this.$store.dispatch('info/findBidsList',{
        //     pageSize: 7,
        //     pageNum: 1,
        //     // transType:this.transType,
        //   })
        //   if (res.status) {
        //     this.listData = res.data;
        //     console.log(res);
        //   } 
        // },
      // 省市地图回调
       mapSvgCall (d) {
          this[d.name] = d.provCityArea;
          if(d.name=='departureCar'){
            this.fromCity = d.provCityArea;
          }
          if(d.name=='destinationCar'){
            this.toCity = d.provCityArea;
        }    
        },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
@import "./../../../assets/css/invite/windindex.scss";
.windbidding-box-content{
  .ant-list-pagination{
      text-align: center !important;
  }
  .ant-select-selection--single{
    height:40px;
  }
  .ant-select-selection__rendered{
      line-height:40px;
  }

 //列表
  .tender-list{
     margin-bottom:60px;
  .tender-list-title{
      width:1200px;
      height:40px;
      background:#F7F7F7;
      border-bottom:1px solid #D8D8D8;
      ul{
        margin:0;
        li{
            float:left;
            text-align:center;
            line-height:40px;
            font-size:16px;
            font-weight:400;
            color:#333333;
        }
        li:first-child{
          width:383px;
          border-right:1px solid #EFEFEF;
        }
        li:nth-child(2){
          width:323px;
          border-right:1px solid #EFEFEF;
        }
        li:nth-child(3){
          width:169px;
          border-right:1px solid #EFEFEF;
        }
         li:nth-child(4){
          width:172px;
          border-right:1px solid #EFEFEF;
        }
        li:last-child{
          width:149px;
          text-align: right;
          padding-right: 56px;
        }
      }
    }
  }

    .invite-box-conent:first-child{
      width:383px;
      text-align:left;
      padding-left: 20px;
    }
    .invite-box-conent:nth-child(2){
      width:323px;
    }
    .invite-box-conent:nth-child(3){
      width:169px;
      line-height:40px;
     }
    .invite-box-conent:nth-child(4){
        width:172px;
        text-align:center;
        line-height:112px;
    }
    .invite-box-conent:nth-child(5){
      width:149px;
      text-align:right;
      line-height:112px;
    }

}
</style>